<template>
<div class="outBox">
  <div class="box" v-bgc v-for="(item,index) in pages" :key="index" @click="gopages(item.url)" >
    <div class="el-icon">
      <i :class="item.class"></i>
    </div>
    <div>
      {{item.pageName}}
    </div>
  </div>
</div>
</template>

<script>
import { mapState,mapMutations } from "vuex";

export default {
  name: "HomePage",

computed:{
    ...mapState(['pages'])
},
  methods:{
...mapMutations(['changeNumber']),
    //点击跳转页面
    gopages(obj){
      console.log('点击到了')
      this.changeNumber()
     this.$router.push(obj)
    }

  }

}
</script>

<style lang="less" scoped>
.box{
  width: 300px;
  height:200px;
  color: white;
  margin: 4px;
  font-size: 28px;
  display: flex;
  justify-content:center;
  align-items: center;
  cursor: pointer;
  .el-icon{
    font-size:85px ;


  }

}
.outBox{

  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>